<template>
  <div class="all">
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="航班延误取消证明打印" name="first" >
      <el-form  :model="form"   label-width="200px"  >
    <el-form-item label="航班号" class="lab" >
       <el-col :span="11">
        <el-input v-model="form.name" style="width:300px" placeholder="请填写航班号"></el-input>
         </el-col>
         <div v-if="form.name.length==0" class="mes">
          *请输入航班号
        </div>
    </el-form-item>
    <el-form-item label="出行日期选择">
        <el-col :span="11">
        <date-picker></date-picker>
        </el-col>
        <el-col :span="1">&nbsp&nbsp&nbsp 
        </el-col>
        <el-col :span="11">
          <div v-if="form.region.toString().length==0" class="mes">
          *请选择出行日期
        </div>
        </el-col>
    </el-form-item>

    <el-form-item label-width="500px">
        <el-button type="primary" >打印</el-button>

    </el-form-item>
    </el-form>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import DatePicker from '@/components/MainArea/components/DatePicker.vue'
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
        },
        activeName: 'first',
        dialogVisible:'false'
      };
    },
    components:{DatePicker},
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
  };
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.all {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  
  .el-tab-pane{
    border-radius:5px solid ;
  }
  .el-tabs.el-tabs--top {
     :deep(.el-tabs__item) {
       
    // border: 1px solid grey;
    border: none;
    color: #466da1;
    background-color: rgb(70,109,161);
    // height: 100px;
    width: 200px;
    padding: 0 20px;
    // margin: 20px;
    &.is-active {
      color:white;
      font-size: 15px;
    }
  };
    :deep(.el-tabs__header.is-top) {
      margin-right: 0;
      color:black;
     // margin-bottom: 25px;
      margin-bottom: -1px;
    }
    :deep(.el-tabs__nav.is-top) {
      background-color: rgb(70,109,161);
      height: 60px;
      //width: 400px;
      line-height: 60px;
      padding-left: 0px;
    }
    .el-form{
      padding-top: 50px;
    }
    .el-tab-pane {
      max-height: 400px;
      overflow: hidden;
    }
  }
  .mes{
  color:red;
  font-size: 5px;
}
  .el-button--primary {
  color: #FFF;
  background-color:#466da1;
  border-color:#466da1;
}

}
</style>
